<template>
	<view class="evaluate">
		<uni-forms ref="baseForm">
			<uni-forms-item label="建议">
				<uni-easyinput class='input' type="textarea" v-model="pj" placeholder="请输入建议" />
			</uni-forms-item>
			<uni-forms-item label="评分" class='score-box'>
				<uni-rate v-model="pf" class='score' @change="onChange" />
			</uni-forms-item>
		</uni-forms>
		<button class="btn" @click="submit">发布</button>

		<view class="evaluate-content">
			<view v-for="(item,index) of evaluateData" :key="index">
				<view class="evaluate-user">
					<view>{{item.name}}({{item.identity==0?'用户':'医生'}})</view>
					<view>
						<uni-rate readonly size="18" :value="item.score" />
					</view>
				</view>
				<view class="evaluate-text">
					<view>
						建议：{{item.evaluate}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseFormData: {
					evaluate: '',
					score: '',
					name: '',
					identity: '',
					account: ''
				},
				pj: '',
				pf: 0,
				currentUser: this.$store.state.currentUser,
				evaluateData: this.$store.state.evaluateData
			}
		},
		mounted() {
			this.baseFormData.name = this.currentUser.name
			this.baseFormData.account = this.currentUser.account
			this.baseFormData.identity = this.currentUser.identity
		},
		methods: {
			onChange() {
				// this.evaluateData.forEach(item => {
				// 	console.log(item.score);
				// })
			},
			submit() {
				// console.log(this.$store.state);
				// uni.clearStorageSync('evaluateData')
				// console.log(this.pf, this.pj);
				if (this.pj == '' || this.pf == 0) {
					uni.showToast({
						title: '请输入评价并进行评分',
						icon: 'error'
					})
					return
				}

				// let obj = JSON.parse(JSON.stringify(this.baseFormData))
				this.baseFormData.score = this.pf
				this.baseFormData.evaluate = this.pj

				// this.evaluateData.unshift(JSON.parse(JSON.stringify(this.baseFormData)))
				this.$store.commit('addEvaluateData', this.baseFormData)
				// this.evaluateData.unshift(this.baseFormData)

				// this.baseFormData.evaluate = ''
				// this.baseFormData.score = ''
				// this.evaluateData = this.$store.state.evaluateData

				console.log(this.currentUser);
				console.log(this.evaluateData);
			},
		}
	}
</script>

<style lang="scss">
	.evaluate {


		.uni-forms {
			margin: 0 auto;
			padding-top: 20rpx;
			width: 600rpx;


			.score-box {
				margin-top: -30rpx;

				.score {
					margin-top: 15rpx;
				}
			}

			.input {
				opacity: 0.8;
			}
		}

		.btn {
			margin-top: -20rpx;
			width: 200rpx;
			height: 80rpx;
			line-height: 80rpx;
		}

		.evaluate-content {
			background-color: white;
			opacity: 0.7;
			margin: 30rpx auto;
			width: 660rpx;
			height: 750rpx;
			overflow: auto;
			padding: 20rpx;

			&>view {
				// background-color: aqua;
				padding: 20rpx;
				border-radius: 20rpx;
				border: 1px solid gray;
				margin: 10rpx 0;

				.evaluate-user {
					display: flex;

					&>view {
						margin-right: 20rpx;
					}
				}

				.evaluate-text {
					margin-top: 20rpx;
				}
			}
		}
	}
</style>
